<template>
<div>

    <h2 >add.vue。操作加减 </h2>
    <h2>mutation：{{$store.state.count}}<span @click="add_add">+</span></h2>
    <h2>action：{{$store.state.count}}<span @click="increment">+</span></h2>

    <p>以下是映射方法：</p>
    <h3 @click="add">...mapMutations：{{count}}<span >+</span></h3>
    <h3 @click="action_add">...mapActions：{{num}}</h3>

</div>
</template>

<script>
import { mapState, mapMutations,mapActions } from 'vuex';

   

export default {
    data() {
        return {
           
        };
    },

    methods: {
        add_add(){
            this.$store.commit('add')
        },
        

        // 映射store 中的方法
        ...mapMutations(['add']),
        ...mapActions(['increment','action_add'])
       
    },


    computed:{
        ...mapState(['count','num'])
    }

    }

</script>


<style scoped>

    span{
        font-size: 30px;
        padding:0 10px;
        color: red;
    }
   

</style>